<template>
	<view class="components-theme">
		<view>
			<uni-section title="" subTitle="" type="line" style="margin-bottom: 3px;">
				<view class="box-bg">
					<!--适应手机状态栏的高度-->
					<view class="status_bar"
						style="height: var(--status-bar-height); width: 100%; background-color: #245b9f;">
					</view>
					<uni-nav-bar dark @clickLeft="back" color="#eee" backgroundColor="#245b9f" height="44"
						left-icon="left" title="责任区" leftText="">
						<block slot="right">
							<view>
								<picker mode="selector" :value="index" :range="range" @change="bindDateChange"
									style="display: inline-block;">
									<view class="uni-input">{{currentYear}}年</view>
									<!-- <view class="uni-input" v-if="">{{year}}年</view> -->
								</picker>
								<u-icon name="arrow-down" color="#fff"
									style="display: inline-block; margin: 5px 5px 5px 5px;"></u-icon>
							</view>
						</block>
					</uni-nav-bar>
				</view>
			</uni-section>
			<view class="uni-list" style="margin-left: 350px;">
				<view class="uni-list-cell">
					<view class="uni-list-cell-db">

					</view>
				</view>
			</view>
		</view>

		<view class="cu-list menu card-menu margin-top-lg top">
			<view class="padding flex text-center yxc">
				<view class="flex flex-sub flex-direction solid-right">
					<view class="textLeft">
						已巡查
						<text class="textLeft1">{{patrolled}}</text>
						<text class="textLeft2">次</text>
					</view>
				</view>
				<view class="flex flex-sub flex-direction">
					<view class="textRight">
						未巡查
						<text class="textRight1">{{noPatrol}}</text>
						<text class="textRight2">次</text>
					</view>
				</view>
			</view>
			<view class="cu-item main">
				<text class="text1">责任区总数：
					<text class="text2">{{nowYearZoneCount.value}}</text>
					个
				</text>
				<view class="action">
					<text class="text1">
						较上年
						<uni-icons class="icon" custom-prefix="iconfont" type="icon-jiaoshangnian" size="10"
							color="#3A9B54"></uni-icons>
						<text class="text2">{{nowYearZoneCount.proportion}}%</text>
					</text>
				</view>
			</view>

			<view class="cu-item main">
				<text class="text1">巡查点总数：
					<text class="text2">{{nowYearPatrolPointCount.value}}</text>
					个
				</text>
				<view class="action">
					<text class="text1">
						较上年
						<uni-icons class="icon" custom-prefix="iconfont" type="icon-jiaoshangnian" size="10"
							color="#3A9B54"></uni-icons>
						<text class="text2">{{nowYearPatrolPointCount.proportion}}%</text>
					</text>
				</view>
			</view>

			<view class="cu-item main">
				<text class="text1">风险点总数：
					<text class="text2">{{nowYearPatrolPointCount.value}}</text>
					个
				</text>
				<view class="action">
					<text class="text1">
						较上年
						<uni-icons class="icon" custom-prefix="iconfont" type="icon-jiaoshangnian" size="10"
							color="#3A9B54"></uni-icons>
						<text class="text2">{{nowYearPatrolPointCount.proportion}}%</text>
					</text>
				</view>
			</view>

			<view class="cu-item main">
				<text class="text1">巡查总时长：
					<text class="text2">{{nowYearInspectionDurationCount.value}}</text>
					h
				</text>
				<view class="action">
					<text class="text1">
						较上年
						<uni-icons class="icon" custom-prefix="iconfont" type="icon-jiaoshangnian" size="10"
							color="#3A9B54"></uni-icons>
						<text class="text2">{{nowYearInspectionDurationCount.proportion}}%</text>
					</text>
				</view>
			</view>

			<view class="cu-item main">
				<text class="text1">巡查总里程：
					<text class="text2">{{nowYearTrackMileageCount.value}}</text>
					km
				</text>
				<view class="action">
					<text class="text1">
						较上年
						<uni-icons class="icon" custom-prefix="iconfont" type="icon-jiaoshangnian" size="10"
							color="#3A9B54"></uni-icons>
						<text class="text2">{{nowYearTrackMileageCount.proportion}}%</text>
					</text>
				</view>
			</view>

			<view class="cu-item main">
				<text class="text1">巡查总次数：
					<text class="text2">{{nowYearPatrolNumCount.value}}</text>
					次
				</text>
				<view class="action">
					<text class="text1">
						较上年
						<uni-icons class="icon" custom-prefix="iconfont" type="icon-jiaoshangnian" size="10"
							color="#3A9B54"></uni-icons>
						<text class="text2">{{nowYearPatrolNumCount.proportion}}%</text>
					</text>
				</view>
			</view>


		</view>

		<view class="cu-list menu card-menu">
			<view class="cu-item bg">
				<text>巡查总时长</text>
			</view>
			<view class="lineChart">
				<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
			</view>
		</view>

		<view class="cu-list menu card-menu">
			<view class="cu-item bg">
				<text>巡查总次数</text>
			</view>
			<view class="lineChart">
				<qiun-data-charts type="area" :opts="opts1" :chartData="chartData1" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		dutyList
	} from "@/api/duty.js";
	export default {
		data() {
			return {
				range: [],
				index: 0,
				currentYear: new Date().getFullYear(), //获取当前年份
				patrolled: "",
				noPatrol: "",
				nowYearZoneCount: "",
				nowYearPatrolPointCount: "",
				nowYearInspectionDurationCount: "",
				nowYearTrackMileageCount: "",
				nowYearPatrolNumCount: "",
				recordListData: {},
				chartData: {},
				chartData1: {},
				opts: {
					color: ["#329395"],
					padding: [15, 10, 0, 15],
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						showTitle: true,
						data: [{
							min: 0,
							title: "(小时)",
						}, ],
					},
					extra: {
						line: {
							width: 2,
							activeType: "hollow",
						},
					},
				},
				opts1: {
					color: ["#329395"],
					padding: [15, 10, 0, 15],
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						showTitle: true,
						data: [{
							min: 0,
							title: "(千次)",
						}, ],
					},
					extra: {
						line: {
							width: 2,
							activeType: "hollow",
						},
					},
				},
			};
		},
		watch: {
			recordListData: function(newVal) {
				this.patrolled = newVal.zonePatrolDate.patrolled
				this.noPatrol = newVal.zonePatrolDate.noPatrol
				this.nowYearZoneCount = newVal.zoneDateNowYearCount.nowYearZoneCount
				this.nowYearPatrolPointCount = newVal.zoneDateNowYearCount.nowYearPatrolPointCount
				this.nowYearInspectionDurationCount = newVal.zoneDateNowYearCount.nowYearInspectionDurationCount
				this.nowYearTrackMileageCount = newVal.zoneDateNowYearCount.nowYearTrackMileageCount
				this.nowYearPatrolNumCount = newVal.zoneDateNowYearCount.nowYearPatrolNumCount

			}
		},

		onLoad() {
			for (let i = this.currentYear - 60; i <= this.currentYear; i++) {
				this.range.push(i)
			}
			this.range.reverse()
		},
		onReady() {
			this.getDutyList(this.currentYear);
		},
		methods: {
			getDutyList(data) {
				dutyList(data)
					.then((result) => {
						this.recordListData = result.data;

						let res = {
							categories: this.recordListData.zoneMonthDurationCount.x,
							series: [{
								data: this.recordListData.zoneMonthDurationCount.y,
							}, ],
						};
						let res1 = {
							categories: this.recordListData.zoneMonthPatrolCount.x,
							series: [{
								data: this.recordListData.zoneMonthPatrolCount.y,
							}, ],
						};
						this.chartData = JSON.parse(JSON.stringify(res));
						this.chartData1 = JSON.parse(JSON.stringify(res1));


					})
					.catch((err) => {
						console.log(err);
					});
			},

			bindDateChange(e) {
				this.currentYear = this.range[e.detail.value]
				this.getDutyList(this.currentYear)
				this.index = e.detail.value // 弹出框关闭以后在出发bindDateChange事件数据还是在上次选择上
			},
			// 自定义菜单点击返回
			back() {
				this.$tab.switchTab("/pages/analyse/index");
				// uni.navigateBack({
				// 	delta: 1
				// })
			}
		},
	};
</script>

<style lang="scss" scoped>
	.components-theme {
		.top {
			border-top: 8rpx solid #eba533;
			background-color: #fff;

			.yxc {
				padding-top: 80rpx;
				padding-bottom: 60rpx;
				background-color: #fafafa;
				border-bottom: 2rpx solid #e5e5e5;

				.textLeft {
					display: inline-block;
					font-size: 28rpx;
					color: #343434;

					.textLeft1 {
						font-size: 60rpx;
						font-style: italic;
						margin-left: 10rpx;
						color: #329395;
					}

					.textLeft2 {
						margin-left: 10rpx;
						color: #329395;
					}
				}

				.textRight {
					display: inline-block;
					font-size: 28rpx;
					color: #343434;

					.textRight1 {
						font-size: 60rpx;
						font-style: italic;
						margin-left: 10rpx;
						color: #329395;
					}

					.textRight2 {
						margin-left: 10rpx;
						color: #329395;
					}
				}
			}

			.main {
				background-color: #fafafa;
				margin: 34rpx 32rpx;

				.text1 {
					color: #343434;
					font-size: 28rpx;

					.text2 {
						font-size: 40rpx;
						font-style: italic;
						font-weight: 600;
					}
				}

				.action {
					.text1 {
						font-size: 24rpx;
						color: #595959;

						.icon {
							margin-left: 20rpx;
						}

						.text2 {
							color: #3a9b54;
							font-size: 24rpx;
							font-weight: 800;
							margin-left: 4rpx;
							margin-right: 24rpx;
						}
					}
				}
			}
		}

		.cu-list {
			.bg {
				background-image: url(../../../static/images/fenxi/jx01.png);
				background-size: 240rpx 90rpx;
				background-repeat: no-repeat;
				color: #185f9a;
				font-size: 32rpx;
				font-weight: 600;
			}

			.lineChart {
				background-color: #ffffff;
				padding-bottom: 40rpx;
			}
		}
	}

	.cu-list.menu-avatar>.cu-item:after,
	.cu-list.menu>.cu-item:after {
		border-bottom: 0px solid #ddd;
	}

	::v-deep .uni-navbar__header-btns-right[data-v-6bda1a90] {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 88px !important;
	}

	// #ifdef APP-PLUS
	::v-deep .uni-navbar__header-btns-right[data-v-6bda1a90] {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 88px !important;
	}

	.box1 {
		.charts-box {
			.sg {
				width: 19%;
				height: 8%;
				position: absolute;
				left: 41%;
				top: 32% !important;
			}
		}
	}

	// #endif
	.u-popup div {
		z-index: 999 !important;
	}
</style>
